<template>
  <div>
    <div v-show="false">
      <div id="printMe">
        <h1>{{info.orderno}}</h1>
        <p>Sender:{{info.sender}}</p>
        <p>Number:{{info.s_tel}}</p>
        <p>Receiver:{{info.receiver}}</p>
        <p>Number:{{info.r_tel}}</p>
      </div>
    </div>
    <a-row>
      <a-col :span="13">
        <a-button
          icon="printer"
          v-print="'#printMe'"
          @click="print"
          type="primary"
          style="margin:10px 0"
        >打印快递单</a-button>
        <a-descriptions :column="2" title="基本信息">
          <a-descriptions-item label="寄件人">
            <EditableField k="sender" :v="info.sender" @change="save"></EditableField>
          </a-descriptions-item>
          <a-descriptions-item label="寄件人电话">
            <EditableField k="s_tel" :v="info.s_tel" @change="save"></EditableField>
          </a-descriptions-item>
          <a-descriptions-item label="收件人">
            <EditableField k="receiver" :v="info.receiver" @change="save"></EditableField>
          </a-descriptions-item>
          <a-descriptions-item label="收件人电话">
            <EditableField k="r_tel" :v="info.r_tel" @change="save"></EditableField>
          </a-descriptions-item>
          <a-descriptions-item label="地址">
            <EditableField k="address" :v="info.address" @change="save"></EditableField>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="价格信息" style="margin-top:30px;">
          <a-descriptions-item label="是否合单">{{info.type|fmtOrderType}}</a-descriptions-item>
          <a-descriptions-item label="订单价格">{{info.price}}</a-descriptions-item>
          <a-descriptions-item label="其他费用">{{info.othermoney}}</a-descriptions-item>
          <a-descriptions-item label="备注">{{info.remark}}</a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :span="11">
        <a-table rowKey="id" :columns="columns" :data-source="info.prods">
          <span slot="tjz" slot-scope="t,r">
            <a-popover trigger="hover">
              <span style="text-decoration:underline">{{t}}</span>
              <template slot="content">长宽高：{{r.c}}cm&nbsp;*{{r.k}}cm&nbsp;*{{r.g}}cm&nbsp;</template>
              <div style="font-size:14px; text-decoration: underline;">{{r.receiver}}</div>
            </a-popover>
          </span>
        </a-table>
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="http://simbajs.com:999/sys/upload"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-button v-if="imageUrl" @click="visible1 = true" type="primary">查看大图</a-button>
      </a-col>
    </a-row>
    <PreviewImage w="300px" h="500px" :src="imageUrl" v-model="visible1"></PreviewImage>
  </div>
</template>

<script>
const columns = [
  {
    id: "1",
    title: "国内单号",
    dataIndex: "expressno",
    key: "expressno",
    ellipsis: true,
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    ellipsis: true,
  },
  {
    title: "重量(kg)",
    dataIndex: "w",
    key: "w",
    width: 80,
  },
  {
    title: "体积重(kg)",
    dataIndex: "tjz",
    key: "tjz",
    scopedSlots: { customRender: "tjz" },
  },
];
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  props: ["id"],
  filters: {
    fmtOrderType(val) {
      return ["不合单", "合单"][val];
    },
  },
  methods: {
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    print() {},
    async getInfo() {
      let { data } = await this.$get("/order/info", { id: this.id });
      this.info = data;
    },
    async save(e) {
      let { success } = await this.$post("/order/updatefield", {
        key: e.key,
        val: e.val,
        id: this.id,
      });
      if (success) this.$ms("更新成功");
    },
  },
  created() {
    this.getInfo();
  },
  data() {
    return {
      loading: false,
      imageUrl: "",
      info: {},
      columns,
      c: "",
      k: "",
      g: "",
      visible1: false,
    };
  },
};
</script>

<style scoped lang='scss'>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.avatar-uploader img {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>